<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="js/clientUtils.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>导播</title>

    </head>
    <body>
        <style>
            html , body , .app{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #111; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}

            .app{ position: relative; overflow: hidden;} 

            .divHeader{ 
                position: fixed;
                width: 100%;
                padding: 10px 20px;
                z-index: 99;
                background-color: #000;
            }
            .divHeader .divToolbar{ 
                position: relative;
            }
            .divHeader .divToolbar .divLogo img{ 
                height: 40px; line-height: 40px;
                background-color: #fafafa;
                padding: 3px;
                border-radius: 20px;
            }
            .divHeader .divToolbar .divLogo .divTitle{ 
                height: 40px; line-height: 40px;
                font-size: 1.8em;
                padding-left: 10px;
            }
            .divHeader .divToolbar .divHeaderTitle { 
                position: absolute;
                height: 40px; line-height: 40px;
                font-size: 1.2em;
                left: 50%;
                transform: translate(-50%);
                background-color: #333;
                border-radius: 20px;
                padding: 0px 20px;
            }
            ul.lstOuts{
                border-radius: 20px;
                background-color: #222;
                border: 2px solid #111;
            }
            ul.lstOuts li{ 
                float: left;
                padding: 0px  15px;
                height: 36px; line-height: 36px;
                border-radius: 20px;
            }
            ul.lstOuts li:hover{ 
                cursor: pointer;
                background-color: #111;
            }
            ul.lstOuts li.active{ 
                background-color: green;
            }

            .divMain{
                padding: 20px;
                padding-top: 80px;
                background-color: #222;
            }
            .divMain .divPan{
                margin-bottom: 15px;
            }

            .divVideo{
                position: relative;
                height:0;
                padding-bottom: 75%;
                overflow: hidden;
                margin-bottom: 15px;
            }
            .divVideo video{
                position: absolute;
                background-color: #000;
                width: 100%;
                height: 100%;
                z-index: 99;
                object-fit: cover;
            }
            .divVideo .divVideoTitle{
                position: absolute;
                background-color: rgba(0,0,0,0.6);
                left: 10px;
                top: 10px;
                height: 24px;
                line-height: 24px;
                padding: 0px 12px;
                border-radius: 12px;
                z-index: 999;
                color: #fff;
            }
            .divVideo.video-o0{ 
                position: absolute;
                left: -1000px;
                width: 100%;
            }

        </style> 
        <div class="app" id="reliving">   
            <div class="divHeader clearfix">
                <div class="divToolbar">
                    <div class="divLogo pull-left clearfix">
                        <img src = "images/logo.png"  class="pull-left"/>
                        <div class="divTitle pull-left">导播控制台</div>
                    </div>
                    <div class="divHeaderTitle">{{info.appName}}</div>
                    <div class="divAcs pull-right">
                        <ul class="lstOuts clearfix">
                            <li
                                v-for="op in outPorts"
                                :key = "op.devCode"
                                :data-code="op.devCode"
                                @click="showVideo"
                                :class="currentOutPortCode==op.devCode?'active':''"
                            >{{op.devName}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="divMain">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="divPan">
                            <div class="row">
                                <div 
                                    class="col-lg-6" 
                                    v-for="port in ports" 
                                    :key="port.devCode" 
                                    :data-code="port.devCode"
                                    @dblclick="setSrc"
                                >
                                    <div :class="'divVideo video-'+port.devType">
                                        <video :id="'portVideo-'+port.devCode" autoplay muted></video>
                                        <div class="divVideoTitle">{{port.devName}}</div>
                                    </div>
                                </div> 
                            </div> 

                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="divPan">
                            <div class="divVideo">
                                <video id="outVideo" autoplay></video>
                                <div class="divVideoTitle">标题名称</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script> 
            var app = new Vue({
                el:"#reliving",
                created(){
                    var me = this;
                    try{   
                        me.start();
                    }
                    catch(er){
                        console.log(er);
                    }
                },
                data(){
                    return { 
                        appCode:"sp02",
                        clientId:['session',( new Date()).getTime() , parseInt(1000*Math.random())].join(''),
                        info:{},
                        objs:{},
                        mqClient: null ,
                        sport: null ,
                        ports:[],
                        inPorts:[],
                        outPorts:[],
                        currentOutPortCode:""
                    }
                },
                methods:{
                    start(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                me.getInfo().then(()=>{
                                    return me.openMQ();
                                }).then(()=>{ 
                                    return me.openSport();
                                }).then(()=>{
                                    return me.createSession();
                                }) .then(()=>{
                                }) 
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } , 
                    getInfo(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                me.clientId = ['session',( new Date()).getTime() , parseInt(1000*Math.random())].join('');
                                var key = "getRelivingInfo";
                                var ps ={ appCode : me.appCode};
                                commClient.query(key , ps).then(res=>{ 
                                    me.info = res[0][0];
                                    me.ports = {};
                                    me.outPorts={};
                                    res[1].forEach(port=>{
                                        me.ports[port.devCode] = port;
                                        if( port.devType=='o' ){
                                            me.outPorts[port.devCode] = port;
                                        }
                                        else{
                                            me.inPorts[port.devCode] = port;
                                        }
                                    })
                                    success();
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    onPickOutPort(event){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                var devCode = event.currentTarget.dataset.code;
                                me.currentOutPortCode = devCode;
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    openSport(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                commClient.openSport( me.info.appCode ).then(res=>{
                                    me.objs = res.data;
                                    Object.values(res.data.ports).forEach(item=>{
                                        var code = item.code.replace('appPort-','');
                                        if( me.ports[code]){
                                            me.ports[code].appPortInfo = item;
                                        }
                                    });
                                    console.log( me.objs);
                                    var code = "session-"+ me.info.devCode;
                                    var pushPortCode ="appPort-"+ me.info.devCode;
                                    var pullPortCode = "appPort-"+ me.info.devCode;
                                    return commClient.createSession( me.info.appCode , code , me.clientId , pushPortCode , pullPortCode)
                                }).then((res)=>{ 
                                    me.objs = res.data;
                                    success();
                                });
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    createSession(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                commClient.getClient().then(client=>{
                                    me.$nextTick(()=>{
                                        var ports = Object.values(me.ports);
                                        var loadItem = function(){
                                            if( ports.length>0){
                                                var port = ports.shift();
                                                var code = "reliving-"+port.devCode ;
                                                var pullPortCode = 'appPort-'+port.devCode ;
                                                var pushPortCode = '';
                                                commClient.createSession( me.info.appCode , code , me.clientId , pushPortCode , pullPortCode).then(res=>{
                                                    console.log(res);
                                                    var endId = res.data.endInfo.kmsId;
                                                    return client.getMediaobjectById(endId);
                                                }).then(end=>{
                                                    port.end = end ;
                                                    var video = document.getElementById('portVideo-'+ port.devCode);
                                                    var opt = JSON.parse(JSON.stringify(commClient.config.kmsPeerOptions));
                                                    opt.remoteVideo = video;
                                                    var peer = commClient.config.kmsPeerTypes.r(opt, function(erPeer){
                                                        port.peer = peer;                                        
                                                        TCommClient.bindPeerEnd(peer , port.end , function(){
                                                            TCommClient.setHD(port.end).then(()=>{
                                                                //video.play();
                                                                loadItem();
                                                            });
                                                        })
                                                    })

                                                })
                                            }
                                            else{
                                                success();
                                            }
                                        }
                                        loadItem(); 
                                    })
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    openMQ(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var onConnect = function () {
                                    console.log('open mq.' , me.clientId)
                                }
                                var onDisConnect = function () {}
                                var onRecMsg = function (msgData) {
                                    console.log(msgData);
                                }
                                commClient.openMq( me.clientId , onConnect , onDisConnect , onRecMsg).then(mqc=>{
                                    me.mqClient = mqc;
                                    success();
                                });
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    }  ,
                    showVideo (event){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                var devCode = event.currentTarget.dataset.code;
                                me.currentOutPortCode = devCode;
                                var video = document.getElementById('portVideo-'+devCode);
                                var tarVideo = document.getElementById('outVideo' );
                                tarVideo.srcObject = video.srcObject;
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    }  ,
                    setSrc (event){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var srcCode = event.currentTarget.dataset.code;
                                var srcId = "";
                                if( me.ports[srcCode]){
                                    srcId = me.ports[srcCode].appPortInfo?me.ports[srcCode].appPortInfo.kmsId:"";
                                }
                                var tarCode = me.currentOutPortCode;
                                var tarId = "";
                                if( me.ports[tarCode]){
                                    tarId = me.ports[tarCode].appPortInfo?me.ports[tarCode].appPortInfo.kmsId:"";
                                }
                                console.log(srcCode , tarCode , srcId , tarId);
                                    if( tarId.length>0 && srcId.length>0){
                                    var ps={
                                        srcId: srcId ,
                                        tarId: tarId
                                    };
                                    commClient.callApi("vsport" , "app" , "connectHubPort" , ps).then(res=>{
                                        console.log(res);
                                        var tarVideo= me.ports[tarCode].peer.remoteVideo;
                                        var video = document.getElementById('outVideo');
                                        video.srcObject = tarVideo.srcObject;
                                    })
                                }
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    }  
                }

            })
        </script>
    </body>
</html>